<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script src="../vue.js"></script>
  <style>
      .public {
          width: 100px;
          height: 100px;
      }

      .boxA {
          background-color: red;
      }

      .boxB {
          background-color: green;
      }

      .classA {
          font-size: 20px;
      }

      .classB {
          flood-color: pink;
          font-weight: 700;
      }

      .blue {
          color: blue;
      }

      .italic {
          font-style: italic;
      }

      .bold {
          font-weight: 700;
      }

  </style>
</head>
<body>
<div id="app">

  <h1>{{msg}}</h1>
  <!--  class+bind的字符串式写法-->
  <div class="public" :class="box1Class?'boxA':'boxB'">box1</div>
  <!--  class+bind的数组式写法-->
  <div class="public" :class="classMax">box2</div>
<!--  class + bind 的对象式写法-->
  <div class="public" :class="{'blue':isBlue,bold:isBold,italic:isItalic}"><h1>box3</h1></div>

</div>

<script>
  Vue.config.productionTip = false;
  const vm = new
  Vue({
    el: '#app',
    data() {
      return {
        msg: 'hello Vue~~~',
        box1Class: true,
        classMax: ['classA', 'classB'],
        isBlue:true,
        isBold:true,
        isItalic:true

      }
    }
  })
</script>

</body>
</html>